<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Class的静态属性</title>
</head>
<body>
    <h1>Class的静态属性</h1>
    <h2>静态属性指的是 Class 本身的属性，即Class.propName</h2>

    <script>
        // 老写法
        class Foo {
        }
        Foo.prop = 1;

        // 新写法
        class Bar {
            static prop = 1;
        }

        // 实际应用示例
        class Article {
            static author = '张三';
            static version = '1.0';
            static categories = ['技术', '编程', 'JavaScript'];

            constructor(title, content) {
                this.title = title;
                this.content = content;
            }

            static getAuthorInfo() {
                return {
                    name: this.author,
                    version: this.version,
                    categories: this.categories
                };
            }
        }

        console.log(Article.author); // '张三'
        console.log(Article.getAuthorInfo());

        // 计数器示例
        class Counter {
            static count = 0;

            constructor() {
                Counter.count++;
            }

            static getCount() {
                return Counter.count;
            }
        }

        new Counter();
        new Counter();
        console.log(Counter.getCount()); // 2

        // 配置类示例
        class Config {
            static dbUrl = 'mongodb://localhost:27017';
            static apiKey = 'your-api-key';
            static settings = {
                timeout: 5000,
                maxRetries: 3
            };

            static getConfig() {
                return {
                    dbUrl: this.dbUrl,
                    apiKey: this.apiKey,
                    ...this.settings
                };
            }
        }

        console.log(Config.getConfig());
    </script>
</body>
</html> 